<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
       


        class  Student extends React.Component{
            
            // 自动把defaultProps值合并到props,在constructor 执行之前
            static defaultProps ={ sex:'保密'}

            static propTypes = {
                name:PropTypes.string.isRequired,
                age:PropTypes.number.isRequired
            }

            constructor(props){
                super(props)
                console.log(props);
            }

            render(){
                let {name,age,sex} =  this.props
                return (
                   <ul>
                        <li>name:{name}</li>
                        <li>age:{age}</li>
                        <li>sex:{sex}</li>
                   </ul>
                )
            }
        }


        //01 ： 添加默认属性值 ； 
        // 添加时机 应该在construtor 构造函数执行之前；
        // 写法: 等同于给类添加静态属性 static defaultProps ={ sex:'保密'}
        // Student.defaultProps = {
        //     sex:'保密'
        // }


        //02 props约束检查
        // Student.propTypes = {
        //     name:PropTypes.string.isRequired,
        //     age:PropTypes.number.isRequired
        // }

        const student = {
            name:'jack',
            age:18
        }
      

        ReactDOM.render(<Student {...student}/>, document.getElementById('app'))
    </script>
</body>

</html>